<template>
  <div>
    <div class="fillcontain" v-if="groupManageIsShow">

        <div class="bus_b">

        <h2 class="title">分组列表</h2>

        </div>


        <div class="table_container">
            <div class="tab_search clearfix">
                <div class="fl">
                    <div class="search_inp el-input">
                        <input type="text" autocomplete="off" placeholder="请输入分组名称" class="el-input__inner">
                    </div> 
                    <button type="button" class="el-button el-button--primary">
                        <i class="search"></i>
                        <span>搜索</span>
                    </button>
                </div> 
                <div class="fr">
                    <el-button type="default" size="small">刷新</el-button>
                    <el-button type="primary" icon="el-icon-plus" @click="addGroup()" size="small">新建分组</el-button>
                </div>
            </div>
                <el-table
                    :data="tableData"
                    size="small"
                    style="width: 100%">
                    <el-table-column
                        prop="id"
                        label="分组名称"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="分组ID"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="mode"
                        label="添加时间">
                    </el-table-column>
                    <el-table-column
                        prop="alarmStatus"
                        label="告警负责人">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="small" type="text" @click="viewGroup()">查看</el-button>
                            <el-button size="small" type="text" @click="updateGroup()">修改</el-button>
                            <el-button size="small" type="text"  @click="delGroup()">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--分页-->
                <div class="Pagination">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="20"
                    layout="total, prev, pager, next"
                    :total="count">
                    </el-pagination>
                </div>

        </div>
        <add-group v-if="groupDialog.show" :isShow="groupDialog.show"  @closeDialog="hideGroupDialog" :title="title"></add-group>
    </div>
    <router-view></router-view>
   </div>
</template>
<script>
import AddGroup from '@/components/electric/addGroup.vue'
export default {
  data() {
    return {
      currentPage: 1, //当前页
      count: 10, //总记录数
      groupDialog: {show: false},
      title: '添加分组',
      groupManageIsShow: true,
      tableData: [
        {
          id: "",
          name: "",
          mode: "",
          alarmStatus: "",
          onlineStatus: "",
          onStatus: "",
          mac: ""
        }
      ]
    };
  },
  components: {AddGroup},
  watch:{
    $route(to,from){
        if(to.path == '/electricBoxManage/deviceGroup') {
            this.groupManageIsShow = true
        } else if(to.path == '/electricBoxManage/deviceGroup/groupDetail'){
            this.groupManageIsShow = false
        }
    }
  },
mounted() {
      if(this.$route.path == '/electricBoxManage/deviceGroup/groupDetail') {
          this.groupManageIsShow = false
      }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleCommand(command) {
        console.log(command)
    },
    viewGroup() {
        this.groupManageIsShow = false
        this.$router.push('/electricBoxManage/deviceGroup/groupDetail')
    },
    addGroup() {
        this.groupDialog.show = true
        this.title = '添加分组'
    },
    updateGroup() {
        this.groupDialog.show = true
        this.title = '修改分组'
    },
    hideGroupDialog() {
        this.groupDialog.show = false
    },
    delGroup() {
        this.$confirm('确定要删除分组吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            closeOnClickModal: false
        }).then(() => {
            this.$message({
                type: 'success',
                message: '设备删除成功!'
            });
        }).catch(() => {}); 
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../style/table.less";
</style>

